<template>
	<view id="mine">
		<!-- 背景半椭圆 -->
		<view id="background-top" />
		
		<view class="header">
			<view class="mine-info">
				<view class="mine-head">
					<image src="../../static/img/infomation/head/logo.jpg" mode="scaleToFill"></image>
				</view>
				<view class="mine-name">
					隆平文化驿站
				</view>
			</view>
		</view>
		
		<view class="main">
			<!-- 部件板块 -->
			<view class="section" v-for="main in section" :key="main.title" @click="underDevelopment">
				<view class="section-title">
					<view class="section-name">
						{{main.title}}
					</view>
					<view class="section-more">
						全部
						<uni-icons type="right" color="#909399" size="12px"></uni-icons>
					</view>
				</view>
				<view class="section-list">
					<view class="section-item" v-for="item in main.list" :key="item.text">
						<view class="item-img">
							<image :src="'../../static/img/icon/mine/'+item.icon" mode="aspectFill"></image>
						</view>
						<view class="item-name">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>
			
			
			<!-- 设置列表 -->
			<view class="setting-list">
				<view class="setting-item" v-for="item in settingList" :key="item.text">
					
					<view class="item-name">
						<uni-icons class="item-icon" :type="item.icon" color="#3a3a3a" size="20px"></uni-icons>
						<text class="item-text">
							{{item.text}}
						</text>
					</view>
					<uni-icons type="right" color="#3a3a3a"></uni-icons>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<button class="leave-login" type="default" @click="underDevelopment">退出登录</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				section:[
					{title:'我的订单',list:[{icon:'yinHangKa.svg',text:'代付款'},{icon:'faHuoZhong.svg',text:'待发货'},{icon:'shouHuo.svg',text:'待收货'},{icon:'jinE.svg',text:'退款/售后'}]},
					{title:'论坛记录',list:[{icon:'guanZhu.svg',text:'关注'},{icon:'wenZhang.svg',text:'文章'},{icon:'shouCang.svg',text:'收藏'},{icon:'pingLun.svg',text:'评论'}]}
				],
				
				settingList:[
					{icon:'help',text:'请求帮助'},
					{icon:'info',text:'关于我们'},
					{icon:'compose',text:'投诉建议'}
				]
			}
		},
		methods: {
			// 未开发
			underDevelopment(){
				// 暂未开发
				uni.showToast({
					title: '此功能暂未开发',
					icon:'none',
					duration: 1000
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	#background-top{
		margin: 0!important;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 80px;
		background-color: #ec3525;
		// border-radius: 0 0 30% 30%;
		z-index: -10;
	}
	
	#mine{
		.header{
			position: relative;
			margin: 0 20px;
			margin-top: 40px;
			background-color: #fff;
			border: 1px solid #DCDCDC;
			border-radius: 5px;
			box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.08);
			
			.mine-info{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-height: 80px;
				.mine-head{
					position: absolute;
					top: -40px;
					width: 80px;
					height: 80px;
					border: 4px solid #fff;
					border-radius: 100px;
					box-shadow: 0 0 5px -1px rgba(0, 0, 0, 1);
					background-color: #f2f2f2;
					overflow: hidden;
					>image{
						width: 72px;
						height: 72px;
					}
				}
				.mine-name{
					margin-top: 50px;
					margin-bottom: 20px;
					font-size: 15px;
					font-weight: bold;
					color: #3a3a3a;
				}
			}
		}
	
		.main{
			
			// 部件板块
			.section{
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				padding: 10px 10px;
				background-color: #fff;
				box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
				
				.section-title{
					position: relative;
					display: flex;
					align-items: center;
					font-size: 13px;
					color: #3a3a3a;
					font-weight: bold;
					
					.section-more{
						position: absolute;
						right: 0;
						font-size: 12px;
						color: #909399;
					}
				}
				.section-list{
					margin: 10px 0 5px 0;
					display: flex;
					justify-content: space-between;
					align-items: center;
					
					.section-item{
						width: 60px;
						display: flex;
						flex-direction: column;
						align-items: center;
						
						.item-img{
							width: 30px;
							height: 30px;
							overflow: hidden;
							display: flex;
							justify-content: center;
							align-items: center;
							>image{
								width: 25px;
								height: 25px;
							}
						}
						.item-name{
							font-size: 13px;
							font-weight: bold;
							color: #3a3a3a;
						}
					}
				}
			}
			
			// 设置列表
			.setting-list{
				margin-top: 10px;
				display: flex;
				flex-direction: column;
				padding: 10px 10px;
				background-color: #fff;
				box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.1);
				
				.setting-item{
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 5px 0;
					
					&:nth-child(n+2){
						border-top: 1px solid rgba(0, 0, 0, 0.08);
					}
					
					.item-name{
						display: flex;
						align-items: center;
						.item-icon{
							transform: translateY(3px);
						}
						
						.item-text{
							font-size: 16px;
							margin-top: 5px;
							margin-bottom: 3px;
						}
					}
					
				}
				
			}
		}
	
		.footer{
			.leave-login{
				background-color: #fff;
				border:1px solid rgba(0, 0, 0, 0.08);
				border-radius: 0;
				
				&::after{
					border: none;
				}
			}
		}
	}

</style>
